<template>
  <div class="app-container">

    <!--项目成本-->
    <el-card style="border-radius: 10px">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="项目编码" prop="projectCode">
          <el-input
            v-model="queryParams.projectCode"
            placeholder="请输入项目编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input
            v-model="queryParams.projectName"
            placeholder="请输入项目名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="border-radius: 10px">
      <el-row :gutter="10" class="mb8">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="projectCostList">
        <el-table-column label="项目编码" align="center" prop="projectCode">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope.row)"
              v-hasPermi="['pc:project:projectCostDetail']"
            >{{scope.row.projectCode}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" align="center" prop="projectName" />
        <el-table-column label="项目类型" align="center" prop="projectTypeName" />
        <el-table-column label="是否启用" align="center" prop="enableFlag">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.enableFlag === 'Y'" type="success">启用</el-tag>
            <el-tag v-if="scope.row.enableFlag === 'N'" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="负责人" align="center" prop="principal" />
        <el-table-column label="发票金额" align="center" prop="orderAmount">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderAmount === 0" type="danger">0</el-tag>
            <el-tag v-if="scope.row.orderAmount !== 0" type="primary">￥{{scope.row.orderAmount}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="成本金额" align="center" prop="costAmount">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.costAmount === 0" type="danger">0</el-tag>
            <el-tag v-if="scope.row.costAmount !== 0" type="success">￥{{scope.row.costAmount}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="毛利金额" align="center" prop="profitAmount">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.profitAmount < 0" type="danger">￥{{scope.row.profitAmount}}</el-tag>
            <el-tag v-if="scope.row.profitAmount > 0" type="success">￥{{scope.row.profitAmount}}</el-tag>
            <el-tag v-if="scope.row.profitAmount === 0" type="danger">0</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>




    <!-- 成本明细 -->
    <el-dialog :title="title" :visible.sync="open" width="1340px" append-to-body>
      <el-card style="border-radius: 10px">
        <el-form
          :model="detailQueryParams"
          ref="queryDetailForm"
          size="small"
          :inline="true"
          v-show="showDetailSearch"
          label-width="85px">
          <el-form-item label="销售订单号" prop="soNumber">
            <el-input
              v-model="detailQueryParams.soNumber"
              placeholder="请输入销售订单号"
              clearable
              @keyup.enter.native="handleQueryDetails"
            />
          </el-form-item>
          <el-form-item label="出库单号" prop="salseCode">
            <el-input
              v-model="detailQueryParams.salseCode"
              placeholder="请输入出库单号"
              clearable
              @keyup.enter.native="handleQueryDetails"
            />
          </el-form-item>
          <el-form-item label="产品编号" prop="itemCode">
            <el-input
              v-model="detailQueryParams.itemCode"
              placeholder="请输入产品编号"
              clearable
              @keyup.enter.native="handleQueryDetails"
            />
          </el-form-item>
          <el-form-item label="产品名称" prop="itemName">
            <el-input
              v-model="detailQueryParams.itemName"
              placeholder="请输入产品名称"
              clearable
              @keyup.enter.native="handleQueryDetails"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryDetails">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQueryDetails">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card style="border-radius: 10px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['pc:project:exportProjectCostDetail']"
            >导出</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="detailLoading" :data="projectCostDetailList">
          <el-table-column label="项目编码" align="center" width="160" prop="projectCode" />
          <el-table-column label="销售订单号" align="center" width="160" prop="soNumber" />
          <el-table-column label="出库单号" align="center" width="130" prop="salseCode" />
          <el-table-column label="产品编号" align="center" width="140" prop="itemCode" />
          <el-table-column label="产品名称" align="center" width="180" prop="itemName" />
          <el-table-column label="规格型号" align="center" prop="specification" />
          <el-table-column label="单位" align="center" width="80" prop="unitOfMeasure" />
          <el-table-column label="出库数量" align="center" prop="quantitySalse" />
          <el-table-column label="成本单价" align="center" prop="costPrice" />
          <el-table-column label="成本金额" align="center" prop="costAmount" />
        </el-table>

        <pagination
          v-show="detailTotal > 0"
          :total="detailTotal"
          :page.sync="detailQueryParams.pageNum"
          :limit.sync="detailQueryParams.pageSize"
          @pagination="getDetailList"
        />
      </el-card>


      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listProjectCost, listProjectCostDetails } from "@/api/mes/pc/projectCost";

export default {
  name: "ProjectCost",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 项目信息表格数据
      projectCostList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectCode: null,
        projectName: null,
        projectTypeId: null,
        projectTypeCode: null,
        projectTypeName: null,
        enableFlag: null,
        principal: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
      },
      detailQueryParams: {
        pageNum: 1,
        pageSize: 10,
        soNumber: null,
        salseCode: null,
        itemCode: null,
        itemName: null,
      },
      // 显示明细搜索条件
      showDetailSearch: true,
      // 明细总条数
      detailTotal: 0,
      // 项目成本明细数据
      projectCostDetailList: [],
      // 明细遮罩层
      detailLoading: true,

    };
  },

  created() {
    this.getList();
  },
  methods: {
    /** 查询项目成本列表 */
    getList() {
      this.loading = true;
      listProjectCost(this.queryParams).then(response => {
        this.projectCostList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('pc/project/exportProjectCostDetail', {
        ...this.detailQueryParams
      }, `项目成本明细_${new Date().getTime()}.xlsx`)
    },
    // 查询明细按钮操作
    handleView(row) {
      this.detailQueryParams.projectCode = row.projectCode;
      this.getDetailList();
      this.open = true;
      this.title = "查看项目明细";
    },
    /** 搜索按钮操作 */
    handleQueryDetails() {
      this.detailQueryParams.pageNum = 1;
      this.getDetailList();
    },
    /** 重置按钮操作 */
    resetQueryDetails() {
      this.resetForm("queryDetailForm");
      this.handleQueryDetails();
    },
    /** 查询项目成本明细列表 */
    getDetailList() {
      this.projectCostDetailList = [];
      listProjectCostDetails(this.detailQueryParams).then(response => {
        this.projectCostDetailList = response.rows;
        this.detailTotal = response.total;
        this.detailLoading = false;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },

  }
};
</script>
